<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-13 20:02:47
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-03-20 15:08:24
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-table\index.vue
-->
<template>
  <div class="pb-table">
    <el-table :cell-style="{ padding: cellPadding + 'px' }" :height="tableHeight" :data="tableData" style="width: 100%"
      v-loading="loading" :row-key="rowKey" :border="border" :span-method="spanMethod" :summary-method="getSummaries"
      :show-summary="showSummary" @SelectionChange="handleSelectionChange" @cell-click="cellClick">
      <el-table-column type="selection" :width="55" v-if="selectionShow" />
      <el-table-column type="index" label="序号" :width="indexWidth" v-if="indexshow" />
      <el-table-column type="index" label="序号" :width="indexWidth" v-if="rowKey == ''" />
      <el-table-column v-for="item in column" :fixed="item.fixed ? item.fixed : false" :key="item.key" :prop="item.key"
        :label="item.name" :min-width="item.width ? item.width : 100" :align="item.align ? item.align : 'left'">
        <template #default="scope" :slot="item.slot" v-if="item.slot">
          <slot :name="item.slot" v-bind="scope">
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineExpose } from 'vue'
const formRef = ref()
/**
 * @param tableData  表单数据
 * @param column     列头
 * @param loading    loading状态
 * @param bottomElement 表格下方元素
 
 */
const emits = defineEmits(['SelectionChange', 'cellClick'])
const handleSelectionChange = (val: any) => {
  emits('SelectionChange', val)
}
const cellClick = (item) => {
  emits('cellClick', item)
}
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  column: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  height: {
    type: [String, Number],
  },
  bottomElement: {
    type: Array,
    default: () => [],
  },
  indexWidth: {
    type: [String, Number],
    default: 100
  },
  cellPadding: {
    type: Number,
    default: 16
  },
  border: {
    type: Boolean,
    default: false
  },
  spanMethod: {
    type: Function,
    default: () => {
    }
  },
  indexshow: {
    type: Boolean,
    default: true
  },
  selectionShow: {
    type: Boolean,
    default: false
  },
  showSummary: {
    type: Boolean,
    default: false
  },
  getSummaries: {
    type: Function,
    default: () => { }
  },
})

const customHeight = ref(0)
const tableHeight = ref(0)
const getHeight = () => {
  const table = document.getElementsByClassName("pb-table");
  if (table.length == 0) return

  // height为table到视图顶部的距离
  const height = table[0].getBoundingClientRect().top;
  customHeight.value = height + 40
  // table在离下方又多少个盒子，遍历出他们的高度将其相加
  if (props.bottomElement.length > 0) {
    props.bottomElement.forEach(item => {
      let itemDom = document.getElementsByClassName(`${item}`)[0];
      let maginTop = 0
      let marginBottom = 0
      // 有时候会丢失dom引发报错
      if (itemDom) {
        // 获取元素高度
        customHeight.value += itemDom.getBoundingClientRect().height;
        // 获取上下外边距
        maginTop = getComputedStyle(itemDom, null).marginTop;
        marginBottom = getComputedStyle(itemDom, null).marginBottom;
      }
      customHeight.value += Number(maginTop ? maginTop.slice(0, -2) : 0) +
        Number(marginBottom ? marginBottom.slice(0, -2) : 0);
    })
  }
  tableHeightAuto()
}

const tableHeightAuto = () => {
  if (props.height) {
    tableHeight.value = props.height
  } else if (customHeight.value) {
    tableHeight.value = window.innerHeight - customHeight.value;
  }
}

const observer = ref(null)
onMounted(() => {
  nextTick(() => {
    getHeight()
  })

  observer.value = new MutationObserver(function (mutations) {
    // console.log('触发触发-------------------');
    // console.log('页面布局已经发生改变',that.customHeight);  
    getHeight();
    // 如果有任何 DOM 节点被修改则会调用这里的回调函数
  });

  var config = { attributes: false, childList: true, subtree: true };
  // 开始观察目标节点（此处为 document）及其所有后代节点
  observer.value.observe(document, config);
  // create an Observer instance
  window.addEventListener("resize", tableHeightAuto, true);

})

</script>

<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper {
  height: 50px;
  background: rgba(0, 0, 0, 0.04);

  .table__footer {
    height: 100%;
  }
}

::v-deep thead {
  th {
    background: #F5F5F5 !important;
    padding: 9px 16px !important;

    &:last-child {
      border-right: none;
    }
  }
}

::v-deep .el-table__body {

  td:last-child {
    border-right: none;

  }
}

::v-deep .cell {
  padding: 0px
}

::v-deep tfoot tr td {
  background: #F5F5F5 !important;
  padding: 15px 16px !important;
}


// 表格右边框线
.el-table--border::after {
  width: 0;
}

// 表格上边框线
:deep(.el-table__inner-wrapper::after) {
  height: 0;
}


// 表格左边框线
.el-table::before {
  width: 0;
}

:deep(.el-table__border-left-patch) {
  width: 0;
}
</style>
